<template>
  <div class="login">
    <el-row class="el_row">
      <el-col :span="12" v-show="isShow">
        <div class="left_content">
          <transition appear name="login_left">
            <div class="box">
              <div class="header">
                <img src="../../assets/image/login_header.jpg" alt="" />
              </div>
              <div class="title">Welcome My Blog</div>
            </div>
          </transition>
        </div>
      </el-col>

      <el-col :span="12" class="col2">
        <section class="form_continer">
            <transition appear name="right_form">
            <div>
              <div class="manage_tip">
                <span>欢迎登陆</span>
              </div>
              <el-form
                ref="loginForm"
                :model="users"
                status-icon
                :rules="rules"
                label-width="100px"
                class="loginForm"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input
                    type="text"
                    v-model="users.username"
                    placeholder="请输入用户名"
                  />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    type="password"
                    v-model="users.password"
                    placeholder="请输入密码"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="submit"
                    @click="login('loginForm')"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="tip">
                <div>
                  没有账号，<router-link to="/reg">注册</router-link>
                </div>
              </div>
            </div>
          </transition>
          </section>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
export default {
  name: "login",
  data() {
    return {
      isShow: true,
      users: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 2, max: 30, message: "邮箱须在2-30字符之间", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "密码长度须在6-30字符之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login(name) {
      //这里进行格式比对
      this.$refs[name].validate((valid) => {
        if (valid) {
          //比对成功再发送请求
          this.$axios
            .post("/admin/login", this.users)
            .then((res) => {
              //登陆成功
              this.$message({
                type: "success",
                message: "账号登陆成功",
              });
              //这里面有登录成功返回的token
              const token = res.data.token;
              console.log(token);
              // 把token存储到本地
              localStorage.setItem("eleToken", token);
              //解析token,存储到vuex中
              const decode = jwt_decode(token);
              this.$store.dispatch("setAuthenticated", this.isNull(decode));
              // console.log("11", decode);
              this.$store.dispatch("setUser", decode.rule);
              //进行路由跳转
              this.$router.push("/index");
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("用户名或密码错误");
            });
        }
      });
    },
    //为空返回false，不为空返回true
    isNull(value) {
      return !(
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: rgba(95, 170, 207, 0.2);
  .el_row {
    width: 100%;
    height: 100vh;
    /* overflow: hidden; */
    .left_content {
      width: 100%;
      height: 100vh;
      background-color: #339999;

      .box {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .header {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .title {
          width: 100%;
          font-size: 32px;
          font-weight: 600;
          user-select: none;
          text-align: center;
          margin-top: -20%;
          color: #e8f1f1;
          filter: drop-shadow(0 0 10px skyblue);
        }
      }
    }
    .form_continer {
      width: 100%;
      height: 100vh;
      background-color: #fff;
      margin: 0 auto;
      .manage_tip {
        width: 100%;
        padding-top: 20%;
        span {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 24px;
          font-weight: 600;
          color: skyblue;
          padding: 10px 0 20px;
          user-select: none;
          filter: drop-shadow(5px 5px 15px skyblue);
        }
      }
      .loginForm {
        width: 75%;
        margin: 0 auto;
        .submit {
          border-radius: 15px;
          filter: drop-shadow(5px 5px 10px skyblue);
        }
      }
    }
    .tip {
      width: 70%;
      font-size: 13px;
      color: #aaa;
      text-align: left;
      margin: 0 auto;
      padding-left: 20%;
      user-select: none;
      a {
        color: skyblue;
      }
    }
  }
}

/* 左边的布局样式 */

.login_left-enter-active,
.login_left-leave-active {
  transition: all 0.7s ease-out;
}

.login_left-enter,
.login_left-leave-to {
  opacity: 0;
  transform: translateY(-300px);
}
.login_left-enter-to,
.login_left-leave {
  opacity: 1;
  transform: translateY(0);
}

//form动画
.right_form-enter-active,
.right_form-leave-active {
  transition: all 1s ease-out;
}

.right_form-enter,
.right_form-leave-to {
  opacity: 0;
  transform: translateY(200px);
}
.right_form-enter-to,
.right_form-leave {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 750px) {
  .left_content {
    display: none !important;
  }
  .col2 {
    width: 100%;
  }
}
</style>

